<template>
  <div id="box">
    <div class="banner">
      <swiper :options="swiperOption"  ref="mySwiper">
        <!-- 这部分放你要渲染的那些内容 -->
        <template v-for="imgs in image_arr">
          <swiper-slide>
            <img :src="imgs">
          </swiper-slide>
        </template>
        <!-- 这是轮播的小圆点 -->
        <div v-if="image_arr.length>1" class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from '../../plug/vue-awesome-swiper'
  import '../../plug/vue-awesome-swiper/swiper.css'
  export default {
    name: "index",
    data() {
      return {
        crt_cont_list: true,
        image_arr: [
          require('../../image/default_school_bg1.jpg'),
          require('../../image/default_school_bg2.jpg'),
          require('../../image/default_school_bg3.jpg'),
          require('../../image/default_school_bg4.jpg'),
          require('../../image/default_school_bg5.jpg'),
        ],
        swiperOption: {
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          autoplay: 2000,
          loop: true,
          speed: 2000,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          autoplayDisableOnInteraction: false,
          paginationClickable: true,
          spaceBetween: 0,
          onSlideChangeEnd: function (swiper) {
            //这个位置放swiper的回调方法

          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {  //计算属性
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    created(){ //实例创建钩子

    },
    mounted(){  //首次渲染钩子
      if(this.image_arr.length<=1){
        //使用swiper这个对象去使用swiper官网中的那些方法
        this.swiper.lockSwipes()
      }
    },
    activated(){ //缓存页面访问钩子

    }
  }
</script>

<style scoped>
  .banner img{
    display: block;
  }
</style>
